<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Forms - Elements - Spectre.css CSS Framework</title>
    <meta charset="utf-8">
    <meta name="robots" content="index, follow">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="description" content="Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
    <meta name="author" content="Yan Zhu">
    <meta property="og:url" content="https://picturepan2.github.io/spectre/elements/forms.html">
    <meta property="og:title" content="Forms - Elements - Spectre.css CSS Framework">
    <meta property="og:description" content="Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="@spectrecss">
    <meta name="twitter:creator" content="@picturepan2">
    <link rel="shortcut icon" href="../img/favicons/favicon.ico">
    <link rel="icon" href="../img/favicons/favicon.png">
    <link rel="stylesheet" href="../dist/spectre.min.css">
    <link rel="stylesheet" href="../dist/spectre-icons.min.css">
    <link rel="stylesheet" href="../dist/spectre-exp.min.css">
    <link rel="stylesheet" href="../dist/docs.min.css">
    <link rel="canonical" href="https://picturepan2.github.io/spectre/elements/forms.html">
  </head>
  <body>
    <div class="docs-container off-canvas off-canvas-sidebar-show">
      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
        <div class="btns d-flex">
          <input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
        </div>
      </div>
      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
        <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
            <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
        </div>
        <div class="docs-nav">
          <div class="accordion-container">
            <div class="accordion">
              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
              <div class="accordion-body">
                <ul class="menu menu-nav">
                  <li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
                  </li>
                  <li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
                  </li>
                  <li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
                  </li>
                  <li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
                  </li>
                </ul>
              </div>
            </div>
            <div class="accordion">
              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
              <div class="accordion-body">
                <ul class="menu menu-nav">
                  <li class="menu-item"><a href="../elements/typography.html">Typography</a>
                  </li>
                  <li class="menu-item"><a href="../elements/tables.html">Tables</a>
                  </li>
                  <li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
                  </li>
                  <li class="menu-item"><a href="../elements/forms.html">Forms</a>
                  </li>
                  <li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
                  </li>
                  <li class="menu-item"><a href="../elements/labels.html">Labels</a>
                  </li>
                  <li class="menu-item"><a href="../elements/code.html">Code</a>
                  </li>
                  <li class="menu-item"><a href="../elements/media.html">Media</a>
                  </li>
                </ul>
              </div>
            </div>
            <div class="accordion">
              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
              <div class="accordion-body">
                <ul class="menu menu-nav">
                  <li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
                  </li>
                  <li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
                  </li>
                  <li class="menu-item"><a href="../layout/hero.html">Hero</a>
                  </li>
                  <li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
                  </li>
                </ul>
              </div>
            </div>
            <div class="accordion">
              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
              <label class="accordion-header c-hand" for="accordion-components">Components</label>
              <div class="accordion-body">
                <ul class="menu menu-nav">
                  <li class="menu-item"><a href="../components/accordions.html">Accordions</a>
                  </li>
                  <li class="menu-item"><a href="../components/avatars.html">Avatars</a>
                  </li>
                  <li class="menu-item"><a href="../components/badges.html">Badges</a>
                  </li>
                  <li class="menu-item"><a href="../components/bars.html">Bars</a>
                  </li>
                  <li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
                  </li>
                  <li class="menu-item"><a href="../components/cards.html">Cards</a>
                  </li>
                  <li class="menu-item"><a href="../components/chips.html">Chips</a>
                  </li>
                  <li class="menu-item"><a href="../components/empty.html">Empty states</a>
                  </li>
                  <li class="menu-item"><a href="../components/menu.html">Menu</a>
                  </li>
                  <li class="menu-item"><a href="../components/modals.html">Modals</a>
                  </li>
                  <li class="menu-item"><a href="../components/nav.html">Nav</a>
                  </li>
                  <li class="menu-item"><a href="../components/pagination.html">Pagination</a>
                  </li>
                  <li class="menu-item"><a href="../components/panels.html">Panels</a>
                  </li>
                  <li class="menu-item"><a href="../components/popovers.html">Popovers</a>
                  </li>
                  <li class="menu-item"><a href="../components/steps.html">Steps</a>
                  </li>
                  <li class="menu-item"><a href="../components/tabs.html">Tabs</a>
                  </li>
                  <li class="menu-item"><a href="../components/tiles.html">Tiles</a>
                  </li>
                  <li class="menu-item"><a href="../components/toasts.html">Toasts</a>
                  </li>
                  <li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
                  </li>
                </ul>
              </div>
            </div>
            <div class="accordion">
              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
              <div class="accordion-body">
                <ul class="menu menu-nav">
                  <li class="menu-item"><a href="../utilities/colors.html">Colors</a>
                  </li>
                  <li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
                  </li>
                  <li class="menu-item"><a href="../utilities/display.html">Display</a>
                  </li>
                  <li class="menu-item"><a href="../utilities/divider.html">Divider</a>
                  </li>
                  <li class="menu-item"><a href="../utilities/loading.html">Loading</a>
                  </li>
                  <li class="menu-item"><a href="../utilities/position.html">Position</a>
                  </li>
                  <li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
                  </li>
                  <li class="menu-item"><a href="../utilities/text.html">Text</a>
                  </li>
                </ul>
              </div>
            </div>
            <div class="accordion">
              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
              <div class="accordion-body">
                <ul class="menu menu-nav">
                  <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
                  </li>
                  <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
                  </li>
                  <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
                  </li>
                  <li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
                  </li>
                  <li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
                  </li>
                  <li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
                  </li>
                  <li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
                  </li>
                  <li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
                  </li>
                  <li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
                  </li>
                  <li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
                  </li>
                  <li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
                  </li>
                  <li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div><a class="off-canvas-overlay" href="#close"></a>
      <div class="off-canvas-content">
        <div class="docs-content" id="content">
          <div class="container" id="forms">
            <h3 class="s-title">Forms<a class="anchor" href="#forms" aria-hidden="true">#</a></h3>
            <div class="docs-ad">
              <div class="hide-md text-center">
                <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
              </div>
              <div class="show-md text-center">
                <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
              </div>
            </div>
            <p>Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.</p>
            <h4 class="s-subtitle" id="forms-input">Form input<a class="anchor" href="#forms-input" aria-hidden="true">#</a></h4>
            <div class="docs-demo columns">
              <div class="column col-6 col-xs-12">
                <div class="form-group">
                  <label class="form-label" for="input-example-1">Name</label>
                  <input class="form-input" id="input-example-1" type="text" placeholder="Name">
                </div>
                <div class="form-group">
                  <label class="form-label" for="input-example-2">Email</label>
                  <input class="form-input" id="input-example-2" type="email" placeholder="Email">
                </div>
              </div>
            </div>
            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- form input control --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"input-example-1"</span>&gt;</span>Name<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-example-1"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Name"</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</code></pre>
            <h4 class="s-subtitle" id="forms-textarea">Form textarea<a class="anchor" href="#forms-textarea" aria-hidden="true">#</a></h4>
            <div class="docs-demo columns">
              <div class="column col-6 col-xs-12">
                <div class="form-group">
                  <label class="form-label" for="input-example-3">Message</label>
                  <textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea>
                </div>
              </div>
            </div>
            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- form textarea control --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"input-example-3"</span>&gt;</span>Message<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">textarea</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-example-3"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Textarea"</span> <span class="hljs-attr">rows</span>=<span class="hljs-string">"3"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">textarea</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</code></pre>
            <h4 class="s-subtitle" id="forms-select">Form select<a class="anchor" href="#forms-select" aria-hidden="true">#</a></h4>
            <div class="docs-demo columns">
              <div class="column col-6 col-xs-12">
                <div class="form-group">
                  <select class="form-select">
                    <option>Choose an option</option>
                    <option>Slack</option>
                    <option>Skype</option>
                    <option>Hipchat</option>
                  </select>
                </div>
                <div class="form-group">
                  <select class="form-select" multiple="">
                    <option>Choose an option</option>
                    <option>Slack</option>
                    <option>Skype</option>
                    <option>Hipchat</option>
                  </select>
                </div>
              </div>
            </div>
            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- form select control --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">select</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-select"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>Choose an option<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>Slack<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>Skype<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>Hipchat<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">select</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</code></pre>
            <h4 class="s-subtitle" id="forms-radio">Form radio<a class="anchor" href="#forms-radio" aria-hidden="true">#</a></h4>
            <div class="docs-demo columns">
              <div class="column col-6 col-xs-12">
                <form>
                  <div class="form-group">
                    <label class="form-label">Gender</label>
                    <label class="form-radio">
                      <input type="radio" name="gender" checked=""><i class="form-icon"></i> Male
                    </label>
                    <label class="form-radio">
                      <input type="radio" name="gender"><i class="form-icon"></i> Female
                    </label>
                  </div>
                </form>
              </div>
            </div>
            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- form radio control --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-label"</span>&gt;</span>Gender<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-radio"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"gender"</span> <span class="hljs-attr">checked</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Male
  <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-radio"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"gender"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Female
  <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</code></pre>
            <h4 class="s-subtitle" id="forms-switch">Form switch<a class="anchor" href="#forms-switch" aria-hidden="true">#</a></h4>
            <div class="docs-demo columns">
              <div class="column col-6 col-xs-12">
                <div class="form-group">
                  <label class="form-switch">
                    <input type="checkbox"><i class="form-icon"></i> Send me emails with news and tips
                  </label>
                </div>
                <div class="form-group">
                  <label class="form-switch">
                    <input type="checkbox" checked=""><i class="form-icon"></i> Send me emails with news and tips
                  </label>
                </div>
              </div>
            </div>
            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- form switch control --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-switch"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Send me emails with news and tips
  <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</code></pre>
            <h4 class="s-subtitle" id="forms-checkbox">Form checkbox<a class="anchor" href="#forms-checkbox" aria-hidden="true">#</a></h4>
            <div class="docs-demo columns">
              <div class="column col-6 col-xs-12">
                <div class="form-group">
                  <label class="form-checkbox">
                    <input type="checkbox"><i class="form-icon"></i> Remember me
                  </label>
                </div>
                <div class="form-group">
                  <label class="form-checkbox">
                    <input type="checkbox" checked=""><i class="form-icon"></i> Remember me
                  </label>
                </div>
              </div>
            </div>
            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- form checkbox control --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-checkbox"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Remember me
  <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</code></pre>
            <div class="docs-demo columns">
              <div class="column">
                <div class="form-group">
                  <label class="form-checkbox">
                    <input id="docs-demo-checkbox" type="checkbox"><i class="form-icon"></i> Select all
                  </label>
                </div>
              </div>
            </div>
            <script>
              document.getElementById("docs-demo-checkbox").indeterminate = true;
              
            </script>
            <p>You can change checkbox to indeterminate state by setting the <code>indeterminate</code> property of input checkboxes to <code>true</code>.</p>
            <h4 class="s-subtitle" id="forms-inline">Inline forms<a class="anchor" href="#forms-inline" aria-hidden="true">#</a></h4>
            <div class="docs-demo columns">
              <div class="column col-6 col-xs-12">
                <form>
                  <div class="form-group">
                    <label class="form-radio form-inline">
                      <input type="radio" name="gender" checked=""><i class="form-icon"></i> Male
                    </label>
                    <label class="form-radio form-inline">
                      <input type="radio" name="gender"><i class="form-icon"></i> Female
                    </label>
                  </div>
                  <div class="form-group">
                    <label class="form-checkbox form-inline">
                      <input type="checkbox"><i class="form-icon"></i> Checkbox 1
                    </label>
                    <label class="form-checkbox form-inline">
                      <input type="checkbox" checked=""><i class="form-icon"></i> Checkbox 2
                    </label>
                  </div>
                </form>
              </div>
            </div>
            <p>You can add the <code>form-inline</code> class to the form components to make them inline in one row.</p>
            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-radio form-inline"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"gender"</span> <span class="hljs-attr">checked</span>=<span class="hljs-string">""</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Male
  <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-radio form-inline"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"gender"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Female
  <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-checkbox form-inline"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Checkbox 1
  <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-checkbox form-inline"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">checked</span>=<span class="hljs-string">""</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Checkbox 2
  <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</code></pre>
            <h4 class="s-subtitle" id="forms-horizontal">Horizontal forms<a class="anchor" href="#forms-horizontal" aria-hidden="true">#</a></h4>
            <p>If you want to have a horizontal form, add the <code>form-horizontal</code> class to the &lt;form&gt; container.
              And add the <code>col-<1-12></code> and <code>col-xs/sm/lg/xl-<1-12></code> class to the child elements for responsive form row layout.
            </p>
            <div class="docs-demo columns">
              <div class="column col-9 col-sm-12">
                <form class="form-horizontal" action="#forms">
                  <div class="form-group">
                    <div class="col-3 col-sm-12">
                      <label class="form-label" for="input-example-4">Name</label>
                    </div>
                    <div class="col-9 col-sm-12">
                      <input class="form-input" id="input-example-4" type="text" placeholder="Name">
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-3 col-sm-12">
                      <label class="form-label" for="input-example-5">Email</label>
                    </div>
                    <div class="col-9 col-sm-12">
                      <input class="form-input" id="input-example-5" type="email" placeholder="Email">
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-3 col-sm-12">
                      <label class="form-label">Gender</label>
                    </div>
                    <div class="col-9 col-sm-12">
                      <label class="form-radio">
                        <input type="radio" name="gender"><i class="form-icon"></i> Male
                      </label>
                      <label class="form-radio">
                        <input type="radio" name="gender" checked=""><i class="form-icon"></i> Female
                      </label>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-3 col-sm-12">
                      <label class="form-label">Source</label>
                    </div>
                    <div class="col-9 col-sm-12">
                      <select class="form-select" multiple="">
                        <option>Slack</option>
                        <option>Skype</option>
                        <option>Hipchat</option>
                      </select>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-9 col-sm-12 col-ml-auto">
                      <label class="form-switch">
                        <input type="checkbox"><i class="form-icon"></i> Send me emails with news and tips
                      </label>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-3 col-sm-12">
                      <label class="form-label" for="input-example-6">Message</label>
                    </div>
                    <div class="col-9 col-sm-12">
                      <textarea class="form-input" id="input-example-6" placeholder="Textarea" rows="3"></textarea>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-9 col-sm-12 col-ml-auto">
                      <label class="form-checkbox">
                        <input type="checkbox"><i class="form-icon"></i> Remember me
                      </label>
                    </div>
                  </div>
                </form>
              </div>
            </div>
            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-horizontal"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-3 col-sm-12"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"input-example-1"</span>&gt;</span>Name<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-9 col-sm-12"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-example-1"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Name"</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-comment">&lt;!-- form structure --&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span>
</code></pre>
            <h4 class="s-subtitle" id="forms-sizes">Form sizes<a class="anchor" href="#forms-sizes" aria-hidden="true">#</a></h4>
            <p>For smaller or larger input and select controls, you could add the <code>input-sm</code>/<code>input-lg</code>, <code>select-sm</code>/<code>select-lg</code> and <code>label-sm</code>/<code>label-lg</code> classes to the elements.</p>
            <div class="docs-demo columns">
              <div class="column col-4 col-xs-12">
                <label class="form-label label-sm">Label</label>
              </div>
              <div class="column col-4 col-xs-12">
                <input class="form-input input-sm" type="text" placeholder="Name">
              </div>
              <div class="column col-4 col-xs-12">
                <select class="form-select select-sm">
                  <option>Choose an option</option>
                  <option>Slack</option>
                  <option>Skype</option>
                  <option>Hipchat</option>
                </select>
              </div>
              <div class="column col-4 col-xs-12">
                <label class="form-label label-lg">Label</label>
              </div>
              <div class="column col-4 col-xs-12">
                <input class="form-input input-lg" type="text" placeholder="Name">
              </div>
              <div class="column col-4 col-xs-12">
                <select class="form-select select-lg">
                  <option>Choose an option</option>
                  <option>Slack</option>
                  <option>Skype</option>
                  <option>Hipchat</option>
                </select>
              </div>
            </div>
            <p>You can add the <code>input-sm</code>/<code>input-lg</code> classes to the input-checkbox, input-radio and input-switch to have different sizes.</p>
            <h4 class="s-subtitle" id="forms-icons">Form icons<a class="anchor" href="#forms-icons" aria-hidden="true">#</a></h4>
            <p>Spectre Forms components has <a href="icons.html">Spectre Icons</a> support.</p>
            <p>Add a wrapper with the <code>has-icon-left</code>/<code>has-icon-right</code> class to &lt;input&gt; element.
              And add the icon with <code>form-icon</code> class next to the &lt;input&gt;.
            </p>
            <div class="docs-demo columns">
              <div class="column col-4 col-xs-12">
                <div class="has-icon-left">
                  <input class="form-input input-sm" type="text" placeholder="Name"><i class="form-icon icon icon-arrow-right"></i>
                </div>
              </div>
              <div class="column col-4 col-xs-12">
                <div class="has-icon-left tooltip" data-tooltip="Lorem ipsum dolor sit amet">
                  <input class="form-input" type="text" placeholder="Name"><i class="form-icon icon icon-arrow-right"></i>
                </div>
              </div>
              <div class="column col-4 col-xs-12">
                <div class="has-icon-left">
                  <input class="form-input input-lg" type="text" placeholder="Name"><i class="form-icon icon icon-arrow-right"></i>
                </div>
              </div>
              <div class="column col-4 col-xs-12">
                <div class="has-icon-right">
                  <input class="form-input input-sm" type="text" placeholder="Name"><i class="form-icon icon icon-check"></i>
                </div>
              </div>
              <div class="column col-4 col-xs-12">
                <div class="has-icon-right">
                  <input class="form-input" type="text" placeholder="Name"><i class="form-icon icon icon-check"></i>
                </div>
              </div>
              <div class="column col-4 col-xs-12">
                <div class="has-icon-right">
                  <input class="form-input input-lg" type="text" placeholder="Name"><i class="form-icon icon icon-check"></i>
                </div>
              </div>
            </div>
            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- form input with Spectre icon --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"has-icon-left"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"..."</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon icon icon-check"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</code></pre>
            <p>You can use the <code>loading</code> class for loading or posting state.</p>
            <div class="docs-demo columns">
              <div class="column col-4 col-xs-12">
                <div class="has-icon-right">
                  <input class="form-input input-sm" type="text" placeholder="Name"><i class="form-icon loading"></i>
                </div>
              </div>
              <div class="column col-4 col-xs-12">
                <div class="has-icon-right">
                  <input class="form-input" type="text" placeholder="Name"><i class="form-icon loading"></i>
                </div>
              </div>
              <div class="column col-4 col-xs-12">
                <div class="has-icon-right">
                  <input class="form-input input-lg" type="text" placeholder="Name"><i class="form-icon loading"></i>
                </div>
              </div>
            </div>
            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- form input with loading icon --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"has-icon-right"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"..."</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon loading"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</code></pre>
            <h4 class="s-subtitle" id="forms-input">Input types<a class="anchor" href="#forms-input" aria-hidden="true">#</a></h4>
            <div class="docs-demo columns">
              <div class="column col-9 col-sm-12">
                <form class="form-horizontal" action="#forms">
                  <div class="form-group">
                    <div class="col-3">
                      <label class="form-label" for="input-example-8">Email</label>
                    </div>
                    <div class="col-9">
                      <input class="form-input" id="input-example-8" type="email" placeholder="Email" value="spectre@example.com" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$">
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-3">
                      <label class="form-label" for="input-example-9">URL</label>
                    </div>
                    <div class="col-9">
                      <input class="form-input" id="input-example-9" type="url" placeholder="URL" value="https://github.com/picturepan2/spectre">
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-3">
                      <label class="form-label" for="input-example-10">Search</label>
                    </div>
                    <div class="col-9">
                      <input class="form-input" id="input-example-10" type="search" placeholder="Search">
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-3">
                      <label class="form-label" for="input-example-11">Tel</label>
                    </div>
                    <div class="col-9">
                      <input class="form-input" id="input-example-11" type="tel" placeholder="Tel" value="1-(888)-888-8888">
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-3">
                      <label class="form-label" for="input-example-12">Password</label>
                    </div>
                    <div class="col-9">
                      <input class="form-input" id="input-example-12" type="password" placeholder="Password" value="123456789">
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-3">
                      <label class="form-label" for="input-example-13">Number</label>
                    </div>
                    <div class="col-9">
                      <input class="form-input" id="input-example-13" type="number" placeholder="00" value="66">
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-3">
                      <label class="form-label" for="input-example-14">Date</label>
                    </div>
                    <div class="col-9">
                      <input class="form-input" id="input-example-14" type="date" value="2016-12-31">
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-3">
                      <label class="form-label" for="input-example-15">Color</label>
                    </div>
                    <div class="col-9">
                      <input class="form-input" id="input-example-15" type="color" value="#5755d9">
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-3">
                      <label class="form-label" for="input-example-16">File</label>
                    </div>
                    <div class="col-9">
                      <input class="form-input" id="input-example-16" type="file">
                    </div>
                  </div>
                </form>
              </div>
            </div>
            <h4 class="s-subtitle" id="forms-input-groups">Input groups<a class="anchor" href="#forms-input-groups" aria-hidden="true">#</a></h4>
            <div class="docs-demo columns">
              <div class="column col-6 col-xs-12">
                <div class="input-group">
                  <input class="form-input input-sm" type="text" placeholder="username">
                  <select class="form-select select-sm">
                    <option>Slack</option>
                    <option>Skype</option>
                    <option>Hipchat</option>
                  </select>
                </div>
              </div>
              <div class="column col-6 col-xs-12">
                <div class="input-group"><span class="input-group-addon addon-sm">slack.com/</span>
                  <input class="form-input input-sm" type="text" placeholder="site name">
                  <button class="btn btn-primary input-group-btn btn-sm">Submit</button>
                </div>
              </div>
              <div class="column col-6 col-xs-12">
                <div class="input-group">
                  <input class="form-input" type="text" placeholder="username">
                  <select class="form-select">
                    <option>Slack</option>
                    <option>Skype</option>
                    <option>Hipchat</option>
                  </select>
                </div>
              </div>
              <div class="column col-6 col-xs-12">
                <div class="input-group"><span class="input-group-addon">slack.com/</span>
                  <input class="form-input" type="text" placeholder="site name">
                  <button class="btn btn-primary input-group-btn">Submit</button>
                </div>
              </div>
              <div class="column col-6 col-xs-12">
                <div class="input-group">
                  <label class="form-switch">
                    <input type="checkbox"><i class="form-icon"></i>
                  </label>
                  <input class="form-input" type="text" placeholder="name">
                </div>
              </div>
              <div class="column col-6 col-xs-12">
                <div class="input-group">
                  <label class="form-checkbox">
                    <input type="checkbox"><i class="form-icon"></i>
                  </label>
                  <input class="form-input" type="text" placeholder="name">
                </div>
              </div>
              <div class="column col-6 col-xs-12">
                <div class="input-group">
                  <input class="form-input input-lg" type="text" placeholder="username">
                  <select class="form-select select-lg">
                    <option>Slack</option>
                    <option>Skype</option>
                    <option>Hipchat</option>
                  </select>
                </div>
              </div>
              <div class="column col-6 col-xs-12">
                <div class="input-group"><span class="input-group-addon addon-lg">slack.com/</span>
                  <input class="form-input input-lg" type="text" placeholder="site name">
                  <button class="btn btn-primary input-group-btn btn-lg">Submit</button>
                </div>
              </div>
            </div>
            <p>If you want to attach text and button along with an input, add the <code>input-group</code> class to the input container.
              And add the <code>input-group-addon</code> class to the text element and <code>input-group-btn</code> to the button element.
            </p>
            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- normal input group --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group-addon"</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"..."</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

<span class="hljs-comment">&lt;!-- large input group --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group-addon addon-lg"</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input input-lg"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"..."</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

<span class="hljs-comment">&lt;!-- normal input group with button --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group-addon"</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"..."</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary input-group-btn"</span>&gt;</span>Submit<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</code></pre>
            <h4 class="s-subtitle" id="forms-validation">Form validation styles<a class="anchor" href="#forms-validation" aria-hidden="true">#</a></h4>
            <div class="docs-demo columns">
              <div class="column col-9 col-sm-12">
                <fieldset>
                  <legend>Input</legend>
                  <div class="form-group">
                    <label class="form-label" for="input-example-17">Name</label>
                    <input class="form-input is-success" id="input-example-17" type="text" placeholder="Name">
                    <p class="form-input-hint">The name is valid.</p>
                  </div>
                  <div class="form-group has-error">
                    <label class="form-label" for="input-example-18">Password</label>
                    <input class="form-input" id="input-example-18" type="password" placeholder="Password">
                    <p class="form-input-hint">Passwords must have at least 8 characters.</p>
                  </div>
                </fieldset>
                <fieldset>
                  <legend>Select</legend>
                  <div class="form-group">
                    <select class="form-select is-error">
                      <option>Choose an option</option>
                      <option>Slack</option>
                      <option>Skype</option>
                      <option>Hipchat</option>
                    </select>
                    <p class="form-input-hint">The option is invalid.</p>
                  </div>
                  <div class="form-group has-success">
                    <select class="form-select">
                      <option>Choose an option</option>
                      <option>Slack</option>
                      <option>Skype</option>
                      <option>Hipchat</option>
                    </select>
                    <p class="form-input-hint">The option is available.</p>
                  </div>
                </fieldset>
                <fieldset>
                  <legend>Checkbox, Radio and Switch (Error state only)</legend>
                  <div class="form-group">
                    <label class="form-checkbox is-error">
                      <input type="checkbox" checked=""><i class="form-icon"></i> I'm not a robot.
                    </label>
                  </div>
                  <div class="form-group has-error">
                    <label class="form-radio">
                      <input type="radio" name="gender" checked=""><i class="form-icon"></i> Male
                    </label>
                    <label class="form-radio">
                      <input type="radio" name="gender"><i class="form-icon"></i> Female
                    </label>
                  </div>
                  <div class="form-group">
                    <label class="form-switch is-error">
                      <input type="checkbox" checked=""><i class="form-icon"></i> Send me emails with news and tips
                    </label>
                  </div>
                </fieldset>
              </div>
            </div>
            <p>To use form validation styles, you can either add <code>is-success</code> or <code>is-error</code> class to the controls or add <code>has-success</code> or <code>has-error</code> class to parent elements.
              Use the <code>form-input-hint</code> class to provide form validation success and error messages.
            </p>
            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">form</span>&gt;</span>
  <span class="hljs-comment">&lt;!-- form validation class: has-success --&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group has-success"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"input-example-1"</span>&gt;</span>Name<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-example-1"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"..."</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input-hint"</span>&gt;</span>The name is invalid.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

  <span class="hljs-comment">&lt;!-- form validation class: is-success --&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"input-example-1"</span>&gt;</span>Name<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input is-success"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-example-1"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"..."</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input-hint"</span>&gt;</span>The name is invalid.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

  <span class="hljs-comment">&lt;!-- form validation example for checkbox, radio and switch --&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-checkbox is-error"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Remember me
    <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span>
</code></pre>
            <div class="docs-demo columns">
              <div class="column col-9 col-sm-12">
                <div class="form-group">
                  <label class="form-label" for="input-example-21">Email</label>
                  <input class="form-input" id="input-example-21" type="text" placeholder="Email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,14}$">
                </div>
                <div class="form-group">
                  <label class="form-label" for="input-example-22">Password</label>
                  <input class="form-input" id="input-example-22" type="password" placeholder="Password" pattern="^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$">
                </div>
              </div>
            </div>
            <p>You can use input <code>pattern</code> attribute to validate the value as well.</p>
            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- pattern validation example for Email --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"email"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Email"</span> <span class="hljs-attr">pattern</span>=<span class="hljs-string">"[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,14}$"</span>&gt;</span>

<span class="hljs-comment">&lt;!-- pattern validation example for password (8 or more characters that are of at least one number, and one uppercase and lowercase letter) --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"password"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Password"</span> <span class="hljs-attr">pattern</span>=<span class="hljs-string">"^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$"</span>&gt;</span>
</code></pre>
            <h4 class="s-subtitle" id="forms-disabled">Form disabled styles<a class="anchor" href="#forms-disabled" aria-hidden="true">#</a></h4>
            <p>
               Add the <code>disabled</code> attribute to the element or &lt;fieldset&gt; for a disabled form components style.</p>
            <div class="docs-demo columns">
              <div class="column col-6 col-xs-12">
                <form action="#forms">
                  <fieldset disabled="">
                    <div class="form-group">
                      <label class="form-label" for="input-example-19">Name</label>
                      <input class="form-input" id="input-example-19" type="text" placeholder="Name">
                    </div>
                    <div class="form-group">
                      <label class="form-label">Gender</label>
                      <label class="form-radio">
                        <input type="radio" name="gender" disabled=""><i class="form-icon"></i> Male
                      </label>
                      <label class="form-radio">
                        <input type="radio" name="gender" disabled=""><i class="form-icon"></i> Female
                      </label>
                    </div>
                    <div class="form-group">
                      <select class="form-select" disabled="">
                        <option>Choose an option</option>
                        <option>Slack</option>
                        <option>Skype</option>
                        <option>Hipchat</option>
                      </select>
                    </div>
                    <div class="form-group">
                      <label class="form-switch">
                        <input type="checkbox" disabled=""><i class="form-icon"></i> Send me emails with news and tips
                      </label>
                    </div>
                    <div class="form-group">
                      <label class="form-label" for="input-example-20">Message</label>
                      <textarea class="form-input" id="input-example-20" placeholder="Textarea" rows="3" disabled=""></textarea>
                    </div>
                    <div class="form-group">
                      <label class="form-checkbox">
                        <input type="checkbox" disabled=""><i class="form-icon"></i> Remember me
                      </label>
                    </div>
                  </fieldset>
                </form>
              </div>
            </div>
            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"#forms"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">fieldset</span> <span class="hljs-attr">disabled</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"input-example-19"</span>&gt;</span>Name<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-example-19"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Name"</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-label"</span>&gt;</span>Gender<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-radio"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"gender"</span> <span class="hljs-attr">disabled</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Male
      <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-radio"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"gender"</span> <span class="hljs-attr">disabled</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Female
      <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">select</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-select"</span> <span class="hljs-attr">disabled</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>Choose an option<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>Slack<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>Skype<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>Hipchat<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">select</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-switch"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">disabled</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Send me emails with news and tips
      <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"input-example-20"</span>&gt;</span>Message<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">textarea</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-example-20"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Textarea"</span> <span class="hljs-attr">rows</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">disabled</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">textarea</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-checkbox"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">disabled</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Remember me
      <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">fieldset</span>&gt;</span>
</code></pre>
          </div>
          <div class="docs-footer container grid-lg" id="copyright">
            <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
            <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
    <script>
      docsearch({ 
      apiKey: 'bede06373c5a1fa3c1bbe8401e24c653', 
      indexName: 'picturepan2_spectre', 
      inputSelector: '.docs-search', 
      debug: true
      }); 
    </script>
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
      
      ga('create', 'UA-2702768-8', 'auto');
      ga('send', 'pageview');
    </script>
  </body>
</html>